<template>
  <!-- 新增建筑物明细 -->
  <div class="company-definite">
    <el-row class="company-title">
      <el-col :span="22">
        <span class="two-level-title">建筑物</span>
      </el-col>
      <el-col :span="2" class="right">
        <el-button v-if="!readOnly" icon="el-icon-plus" type="primary" plain :disabled="addDis" size="mini" @click="handleAddTableFromData">新增</el-button>
      </el-col>
    </el-row>
    <el-form ref="tableForm" inline-message :model="formTableData" :rules="tableRules">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        class="definite-list"
        :data="tableFormData"
        :size="detailSize"
        max-height="500px"
      >
        <el-table-column column-key="2" type="index" label="序号" width="51" align="center" />
        <el-table-column
          prop="buildName"
          label="建筑名称"
          min-width="180"
          align="center"
          column-key="3"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.action == 'view' || scope.row.action == 'fill'">{{ scope.row.buildName }}</span>
            <el-form-item v-else prop="buildName">
              <el-input v-model="formTableData.buildName" clearable placeholder="请输入建筑名称" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="buildArea"
          label="地上层数"
          min-width="180"
          align="center"
          column-key="3"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.action == 'view' || scope.row.action == 'fill'">{{ scope.row.upperNum }}</span>
            <el-form-item v-else prop="upperNum">
              <el-input v-model="formTableData.upperNum" clearable placeholder="请输入地上层数">
                <template slot="append"><el-button />层</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="buildArea"
          label="地下层数"
          min-width="180"
          align="center"
          column-key="3"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.action == 'view' || scope.row.action == 'fill'">{{ scope.row.undergroundNum }}</span>
            <el-form-item v-else prop="undergroundNum">
              <el-input v-model="formTableData.undergroundNum" clearable placeholder="请输入地下层数">
                <template slot="append"><el-button />层</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <!--<el-table-column
          prop="buildArea"
          label="建筑面积"
          min-width="180"
          align="center"
          column-key="3"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.action == 'view' || scope.row.action == 'fill'">{{ scope.row.buildArea }}</span>
            <el-form-item v-else prop="buildArea">
              <el-input v-model="formTableData.buildArea" clearable placeholder="请输入建筑面积">
                <template slot="append"><el-button />㎡</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>-->
        <el-table-column v-if="!readOnly" column-key="10" prop="operation" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope.row.action=== 'add'" size="mini" @click="click_add(scope.row,scope.$index)">保存</el-button>
            <el-button v-if="scope.row.action=== 'add'" size="mini" @click="cancelAdd(scope.row,scope.$index)">取消</el-button>
            <el-button v-if="scope.row.action=== 'edit'" size="mini" @click="click_editSave(scope.row,scope.$index)">保存</el-button>
            <el-button v-if="scope.row.action=== 'edit'" size="mini" @click="cancelEdit(scope.row,scope.$index)">取消</el-button>
            <el-button v-if="scope.row.action=== 'view'" size="mini" @click="click_edit(scope.row,scope.$index)">修改</el-button>
            <el-button v-if="scope.row.action=== 'view'" size="mini" @click="deleteRow(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { integer } from '@/utils/validate'
export default {
  name: 'CompanyDefinite',
  props: {
    readOnly: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // 明细表
      addDis: false, // 新增按钮是否可用
      formTableData: {}, // 每一行的表单
      tableFormData: this.tableData, // 表格
      loading: false,
      tableRules: {
        buildName: [
          { required: true, message: '建筑名称不得为空' }
        ],
        upperNum: [
          { required: true, message: '地上层数不得为空' },
          { validator: integer, trigger: 'blur' }
        ],
        undergroundNum: [
          { required: true, message: '地下层数不得为空' },
          { validator: integer, trigger: 'blur' }
        ]
      }, // 表格验证
      deleteDetail: [],
      contactOptions: ''
    }
  },
  computed: {
  },
  watch: {
    tableData(val) {
      let newArr = []
      if (val && val.length > 0 && val[0].oldRow === undefined && val[0].action !== 'view') {
        newArr = val.map(item => {
          if (item.buildName === '无') {
            this.addDis = true
          }
          item.action = 'view'
          return item
        })
      } else {
        newArr = val
      }
      if (JSON.stringify(val) !== JSON.stringify(this.tableFormData)) {
        this.tableFormData = newArr
      }
    },
    tableFormData: {
      handler(newVal) {
        this.changetableFormData()
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    /** ****** 动态新增表格start****************/
    // 判断存在表格是否可编辑
    filterTableFromDataEdit(tableFromData) {
      let flg = false
      this.tableFormData.map(item => {
        if (item.action === 'add' || item.action === 'edit') {
          flg = true
        }
      })
      return flg
    },
    // 动态表格新增一行
    handleAddTableFromData() {
      if (this.tableFormData && this.tableFormData.length > 0) {
        if (this.filterTableFromDataEdit(this.tableFormData)) {
          this.msgInfo('请先保存正在编辑的数据')
        } else {
          this.tableFormData.push({
            action: 'add',
            oldRow: {}
          })
          this.addDis = true
        }
      } else {
        this.tableFormData = []
        this.tableFormData.push({
          action: 'add',
          oldRow: {}
        })
        this.addDis = true
      }
    },
    // 判断新增按钮是否可用
    checkAddBtn(tableFormData) {
      if (tableFormData.length > 0) {
        this.addDis = false
        tableFormData.map((item) => {
          if (item.action === 'add' || item.action === 'edit') {
            this.addDis = true
            return
          }
        })
      } else {
        this.addDis = false
      }
    },
    // 判断明细不能重复
    checkRepeat(tableFormData, row, index) {
      if (tableFormData.length > 0) {
        for (let i = 0; i < tableFormData.length; i++) {
          if (tableFormData[i].buildName === row.buildName && i !== index) {
            this.msgInfo('不能填写重复的明细')
            tableFormData[index].action = 'add'
            return false
          }
        }
        tableFormData[index].action = 'view'
        this.checkAddBtn(tableFormData)
      }
    },
    // 检查表单是否为无
    checkbuildNameNull(buildName, upperNum, undergroundNum, row, index) {
      this.formTableData = {
        buildName,
        upperNum: Number(upperNum),
        undergroundNum: Number(undergroundNum)
      }
      this.tableFormData[index] = Object.assign(this.tableFormData[index], this.formTableData)
      this.checkRepeat(this.tableFormData, row, index)
      this.emptyFormData()
    },
    // 新增保存操作
    click_add(row, index) {
      this.$refs.tableForm.validate(validate => {
        if (validate) {
          this.checkbuildNameNull(this.formTableData.buildName, this.formTableData.upperNum, this.formTableData.undergroundNum, row, index)
        }
      })
    },
    // 新增取消
    cancelAdd(row, index) {
      this.emptyFormData()
      this.tableFormData.splice(index, 1)
      this.checkAddBtn(this.tableFormData)
    },
    // 修改保存
    click_editSave(row, index) {
      console.log(typeof this.formTableData.buildName)
      this.$refs.tableForm.validate(validate => {
        if (validate) {
          this.checkbuildNameNull(this.formTableData.buildName + '', this.formTableData.upperNum, this.formTableData.undergroundNum, row, index)
        }
      })
    },
    // 修改取消
    cancelEdit(row, index) {
      this.$set(this.tableFormData, index, row)
      row.action = 'view'
      this.checkAddBtn(this.tableFormData)
      this.emptyFormData()
    },
    // 修改
    click_edit(row, index) {
      if (this.filterTableFromDataEdit(this.tableFormData)) {
        this.msgInfo('请先保存正在编辑的数据')
      } else {
        row.action = 'edit'
        // 将原数据放到oldRow对象中
        row.oldRow = JSON.parse(JSON.stringify({ ...row }))
        this.formTableData = { ... row }
        this.$set(this.tableFormData, index, row)
        this.checkAddBtn(this.tableFormData)
      }
    },
    // 删除
    deleteRow(row, index) {
      this.tableFormData.splice(index, 1)
      if (row.id !== '') {
        this.deleteDetail.push(row.id)
      }
      this.emptyFormData()
      this.checkAddBtn(this.tableFormData)
    },
    // 清空 动态表格
    emptyFormData() {
      this.resetForm('tableForm')
      this.formTableData.id = ''
      this.formTableData.buildName = ''
      this.formTableData.upperNum = ''
      this.formTableData.undergroundNum = ''
    },
    // // 把信息回传给父组件
    changetableFormData() {
      this.$emit('getTableFormData', this.tableFormData)
    }
    /** 动态新增表格end******************/
  }
}
</script>

